<template>
  <div class="app-container KpiSetting">
    <el-table
      :data="tableList"
      :span-method="objectSpanMethod"
      border
      style="width: 100%"
    >
      <!-- KPI指标 -->
      <el-table-column
        :prop="tableMode[0].prop"
        :label="tableMode[0].lable"
        :align="tableMode[0].align"
        :width="tableMode[0].width"
      ></el-table-column>
      <!-- 运算关系 -->
      <el-table-column
        :prop="tableMode[1].prop"
        :label="tableMode[1].lable"
        :align="tableMode[1].align"
        :width="tableMode[1].width"
      >
        <!-- select -->
        <template #default="{ row }">
          <el-select
            v-model="relationSelect.value"
            placeholder="请选择"
            @change="handleSelectChange(row)"
          >
            <el-option
              v-for="(item, index) in relationSelect.selectOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <!-- 编号 -->
      <el-table-column
        :prop="tableMode[2].prop"
        :label="tableMode[2].lable"
        :align="tableMode[2].align"
        :width="tableMode[2].width"
      >
      </el-table-column>
      <!-- 指标值 -->
      <el-table-column
        :prop="tableMode[3].prop"
        :label="tableMode[3].lable"
        :align="tableMode[3].align"
        :width="tableMode[3].width"
      >
        <template #default="{ row }">
          <el-input v-model="row.value" placeholder="请输入内容"></el-input>
        </template>
      </el-table-column>
      <!-- 换算系数 -->
      <el-table-column
        :prop="tableMode[4].prop"
        :label="tableMode[4].lable"
        :align="tableMode[4].align"
        :width="tableMode[4].width"
      >
        <template #default="{ row }">
          <el-input
            v-model="row.coefficient"
            placeholder="请输入内容"
          ></el-input>
        </template>
      </el-table-column>
      <!-- 状态 -->
      <el-table-column
        :prop="tableMode[5].prop"
        :label="tableMode[5].lable"
        :align="tableMode[5].align"
        :width="tableMode[5].width"
      >
        <template #default="{ row }">
          <el-switch
            v-model="row.status"
            active-value="0"
            inactive-value="1"
            @change="handleStatusChange(row)"
          ></el-switch>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column
        :label="tableMode[6].lable"
        :align="tableMode[6].align"
        :width="tableMode[6].width"
      >
        《comMb8Button》
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import comTable from "@/wss/components/comTable.vue";

import { getRoleSettingList } from "@/wss/api/assess/kpi.js";
export default {
  name: "KpiSetting",
  components: {
    comTable,
  },
  data() {
    return {
      //------- queryData -------//
      queryData: {},
      //------Table--------//
      tableList: [],
      spanArr: [],
      position: 0,
      tableMode: [
        {
          prop: "type",
          lable: "KPI指标",
          align: "center",
          //width:'100%'
        },
        {
          prop: "relation",
          lable: "关系",
          align: "center",
          //width:'100%'
        },
        {
          prop: "no",
          lable: "编号",
          align: "center",
          width: "100%",
        },
        {
          prop: "value",
          lable: "指标值",
          align: "center",
          //width:'100%'
        },
        {
          prop: "coefficient",
          lable: "换算系数",
          align: "center",
          //width:'100%'
        },
        {
          prop: "status",
          lable: "状态",
          align: "center",
          width: "100%",
        },
        {
          lable: "操作",
          align: "center",
          //width:'100%'
        },
      ],
      aa: [],
      //------- Select -------//
      relationSelect: {
        value: "",
        selectOptions: [
          {
            value: "相加",
            label: "相加",
          },
          {
            value: "相乘",
            label: "相乘",
          },
        ],
      },
    };
  },
  computed: {
    tableList_TypeList() {
      let typeList = [];
      this.tableList.forEach((item) => {
        typeList.push(item.type);
      });
      return typeList;
    },
  },
  beforeRouteEnter(to, from, next) {
    /* must call `next` */
    next((vm) => {
      vm.queryData = JSON.parse(to.query.data);
      console.log(vm.queryData);
      vm.$route.meta.title = vm.queryData.name + "-KPI设定";
      let path = vm.$route.path;
      vm.$store.commit("tagsView/UPDATE_TITLE", path);
    });
  },
  mounted() {
    this.getRoleSettingList({ postionId: this.queryData.postionId });
  },

  methods: {
    //------- Switch -------//
    handleStatusChange(row) {
      console.log(row);
    },
    //------- Select -------//
    handleSelectChange(row) {
      console.log(row.idStr, row.type);

      console.log(this.tableList_TypeList);
    },
    //------- table -------//
    //单元格整理
    rowspan() {
      var i = 0;
      this.tableList.forEach((item, index) => {
        if (index === 0) {
          this.spanArr.push(1);
          this.position = 0;
          i++;
          item["no"] = i;
        } else {
          if (this.tableList[index].type === this.tableList[index - 1].type) {
            this.spanArr[this.position] += 1;
            this.spanArr.push(0);
            i++;
            item["no"] = i;
          } else {
            this.spanArr.push(1);
            this.position = index;
            i = 0;
            i++;
            item["no"] = i;
          }
        }
      });
      console.log(this.spanArr);
    },
    //合并单元格方法
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      //表格合并行
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
      if (columnIndex === 1) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
      if (columnIndex === 5) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    //数据整理
    /* getNewListData(dataList) {
      var flag = 0;
      var tableList_new = []; //已分类的数组
      var classifiedItem = {
        //已分类的数组单项
        title: "",
        itemList: "",
      };
      for (var i = 0; i < dataList.length; i++) {
        var equalIndex = ""; //相等的下表
        for (var j = 0; j < tableList_new.length; j++) {
          if (tableList_new[j].title == dataList[i]["type"]) {
            flag = 1;
            equalIndex = j;
            break;
          }
        }
        if (flag == 1) {
          tableList_new[equalIndex].itemList.push(dataList[i]);
          flag = 0;
        } else if (flag == 0) {
          classifiedItem = {};
          classifiedItem.title = dataList[i]["type"];
          classifiedItem.itemList = new Array();
          classifiedItem.itemList.push(dataList[i]);
          tableList_new.push(classifiedItem);
        }
      }
      this.aa = tableList_new;
      console.log(this.aa);
    }, */

    /* 获取数据 */
    //------- 获取 kpi设定 -------//
    async getRoleSettingList(data) {
      console.log(data);
      let result = await getRoleSettingList(data).then((res) => res);
      this.tableList = result.rows.sort(function (x, y) {
        //localeCompare 按拼音降序排序
        return x.type.localeCompare(y.type, "zh");
      });
      this.rowspan(); //单元格整理
    },
  },
};
</script>

<style lang="scss" scoped>
</style>